<%--
  Created by IntelliJ IDEA.
  Role: dell
  Date: 2020/7/15
  Time: 18:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <title>角色管理</title>
</head>
<body>
<jsp:include page="/common/common-js.jsp"></jsp:include>
<jsp:include page="/common/common-nav-daohangtiao.jsp"></jsp:include>
<jsp:include page="role-js.jsp"></jsp:include>

<!-- 条件查询 -->
<div class="container-fluid">
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">角色查询</div>
        </div>
        <div class="panel-body">
            <form class="form-horizontal">
                <div class="form-group">
                    <label class="control-label col-md-2">角色名称</label>
                    <div class="col-md-3">
                        <input type="text" name="roleName" class="form-control">
                    </div>

                <div class="form-group">

                    <label class="control-label col-md-2">创建日期</label>
                    <div class="col-md-3">
                        <div class="input-group">
                            <input type="text" name="minDate" class="form-control" id="minDate">
                            <label class="input-group-addon">---</label>
                            <input type="text" name="maxDate" class="form-control" id="maxDate">
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-md-4"></label>
                    <div class="col-md-3">
                        <button type="button" class="btn btn-success" onclick="query()">查询</button>
                        <button type="reset" class="btn btn-danger">重置</button>
                    </div>
                </div>

            </form>

        </div>
    </div>

    <!-- 新增、修改aouRoleName的div-->
    <div id="aouDiv" style="display: none">
        <form class="form-horizontal">
            <input type="hidden" name="aouRoleId">
            <div class="form-group">
                <label class="control-label col-md-2">角色名称</label>
                <div class="col-md-3">
                    <input type="text" name="aouRoleName" class="form-control">
                </div>
            </div>


        </form>
    </div>

    <!--查询数据-->
    <button class="btn btn-success" onclick="showAdd()">新增</button>
    <button class="btn btn-danger" onclick="bothDelete()">批量删除</button>
    <!-- datatables -->
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">角色列表</div>
        </div>
        <div class="panel-body">

            <table id="roleTable" style="width:100%">
                <thead>
                <td>id</td>
                <td>角色名称</td>
                <td>创建日期</td>
                <td>修改日期</td>
                <td>操作</td>
                </thead>
            </table>
        </div>
    </div>

</div>
</body>
<script>
    var datatable;
    var aouDivHtml;
    $(function(){
        initDate("minDate");
        initDate("maxDate");
        datatable = initRoleTable();
        backHtml();
    })


    //查询数据
    function initRoleTable(){
        return initDatatables("roleTable","<%=basePath%>role/queryRole.do",
            function (p) {
                //获取查询条件的值
                p.roleName = jqueryName("roleName").val();
                p.maxDate = jqueryName("maxDate").val();
                p.minDate = jqueryName("minDate").val();
                return p;
            }
            ,
            [
                {
                    "data": "roleId",
                    "render": function (data, type, row, meta) {
                        return "<input type=\"checkbox\" name=\"roleIds\" value=\"" + data + "\" />";
                    }
                },
                {"data": "roleName"},

                {"data": "createDate"},
                {"data": "updateDate"},
                {
                    "data": "roleId",
                    "render": function (data, type, row, meta) {

                        var v_icon = "";
                        var v_text = "";
                        var v_color = "";
                        var v_hot = 0;

                        if (row.hot == 1) {
                            v_text = "非热销";
                            v_icon = "glyphicon glyphicon-thumbs-down";
                            v_color = "btn btn-warning";
                            v_hot = 0;
                        } else {
                            v_text = "热销";
                            v_icon = "glyphicon glyphicon-thumbs-up";
                            v_color = "btn btn-success";
                            v_hot = 1;
                        }

                        return "<div class=\"btn-group\" role=\"group\" >\n" +
                            "  <button type=\"button\" class=\"btn btn-info\" onclick=\"showUpdate('" + data + "')\"><i class='glyphicon glyphicon-pencil'></i> 修改</button>\n" +
                            "  <button type=\"button\" class=\"btn btn-danger\" onclick=\"deleteRole('" + data + "')\"><i class='glyphicon glyphicon-trash'></i> 删除</button>\n" +
                            "  <button type=\"button\" class=\"" + v_color + "\" onclick=\"updateRoleHot('" + data + "','" + v_hot + "')\"><i class='" + v_icon + "'></i> " + v_text + "</button>\n" +
                            "</div>";
                    }
                }
            ]
        );


    }

</script>
</html>
